<template>
  <div class="header">
		 <el-image style="margin:0 20px;height:60px;" :src="logoUrl" fit="fill"></el-image>
		 
		<el-dropdown trigger="click">
      <div class="header-avater">
				<el-avatar size="medium" :src="circleUrl"></el-avatar>
				<span style="margin-left: 10px">{{username}}</span>
        <i class="el-icon-arrow-down el-icon--right"></i>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="toPersonalHome" icon="el-icon-s-home">个人主页</el-dropdown-item>
        <el-dropdown-item @click.native="logout" icon="el-icon-s-unfold">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
	data(){
		return {
			username: '',
			circleUrl: require("../assets/user.jpg"),
			logoUrl: require('../assets/logo.jpg'),
		}
	},
	mounted() {
    let userInfo = JSON.parse(localStorage.getItem('userInfo'))
    if (null === userInfo) this.$router.push("/login");
    if (userInfo.isLogin) {
      this.username = userInfo.username
    }
  },
	methods: {
		toPersonalHome() {
			sessionStorage.setItem('Index', JSON.stringify({activeIndex: ''}));
			this.$router.push("/personalHome")
		},
		logout() {
			sessionStorage.clear()
			localStorage.clear()
			this.$router.push("/login")
		},
	}
}
</script>

<style>
.header{
	width: 100%;
	height: 100%;
  background: #212121;
  color: #fff;

	display: flex;
	justify-content: space-between;
	align-items: center;
}
.el-dropdown{
	margin: 0 5% 0 0;
}
.header-avater{
	color: #fff;

	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>